<template>
    <div>
        <div class="hot_box">
            <div class="hot_search">
                <p>热门搜索</p>
                <div class="hot-list">
                    <ul>
                        <li v-for="item in hotlist" @click="gethot" :key="item.id">{{ item.name }}</li>
                    </ul>
                </div>
            </div>

            <div class="history_search" v-if="historylist.length > 0">
                <div class="top_box">
                    <p>历史搜索</p>
                    <i class="delete" @click="allClear"></i>
                </div>
                <div class="history_list">
                    <ul>
                        <li v-for="item in historylist" :key="item" @click="gethot">
                            <i></i>
                            <p>{{ item }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { bookHotSearch } from "@/api/found";
export default {
    data() {
        return {
            hotlist: [],
            historylist: [],
        };
    },
    methods: {
        gethot(e) {
            console.log(e.target.innerText);
            this.$emit("hot", e.target.innerText);
        },
        getHotSearch() {
            bookHotSearch({}).then((res) => {
                // console.log(res);
                this.hotlist = res.list;
            });
        },
        gethistory() {
            let history = localStorage.history;
            if (history != undefined) {
                let arr = history.split(",");
                this.historylist = arr;
            }
        },
        allClear() {
            this.historylist = [];
            localStorage.removeItem("history");
        },
    },
    mounted() {
        this.getHotSearch();
        this.gethistory();
    },
};
</script>

<style lang="scss" scoped>
.hot_box {
    width: 100%;
    padding: 70px 0 0;
    .hot_search {
        padding-top: 5px;

        p {
            font-size: 12px;
            color: #999;
        }

        .hot-list {
            padding: 10px 0;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
        }
        li {
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 14px;
            background: #f0f0f0;
            margin: 0 10px 10px 0;
        }
    }
    .history_search {
        padding: 10px 0;
    }
    .top_box {
        padding-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            font-size: 12px;
            color: #999;
        }

        i {
            display: block;
            width: 20px;
            height: 20px;
            // background: #000;
            background-image: url(@/assets/delete.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }
    .history_list {
        width: 100%;

        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        li {
            width: 50%;
            padding: 10px 0;
            display: flex;
            align-items: center;
            i {
                display: block;
                width: 18px;
                height: 18px;
                background-image: url(@/assets/sousuo.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
            p {
                padding-left: 5px;
                font-size: 14px;
                color: #313131;
            }
        }
    }
}
</style>
